@import '../../global-styles/breakpoints';

.item {
    display: flex;
    align-items: stretch;
    margin: 0 0.75rem;
    &:first-child {
        margin-left: 0;
    }
    &:last-child {
        margin-right: 0;
    }
    @media (--sm-breakpoint-down) {
        margin: 0;
    }
}

.link {
    outline-offset: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--body-color);
    &:hover {
        text-decoration: none;
    }
    &:focus-visible {
        outline: none;
        box-shadow: none;
        .link-content {
            outline: 1px solid transparent;
            border-radius: var(--border-radius);
            box-shadow: 0 0 0 2px var(--primary-2);
            padding: 0.125rem;
            margin: -0.125rem;
        }
        @media (--sm-breakpoint-down) {
            margin: 0;
            border: 0;
        }
    }
    &:hover:not(.active) {
        border-bottom: 2px solid var(--border-color-2);
        .link-content {
            margin-bottom: -0.125rem;
        }
        @media (--sm-breakpoint-down) {
            margin: 0;
            border: 0;
            background-color: var(--link-color);
            .link-content {
                margin-bottom: 0;
            }
            .icon,
            .text {
                color: var(--light-text);
            }
        }
    }
    .link-content {
        display: inline-flex;
        align-items: center;
    }
    @media (--sm-breakpoint-down) {
        padding: 0.25rem 0.625rem;
        flex: 1;
        align-items: flex-start;
        justify-content: flex-start;
    }
}

.active {
    border-bottom: 2px solid var(--brand-secondary);
    &:focus-visible {
        margin-top: 0.125rem;
        @media (--sm-breakpoint-down) {
            margin-top: 0;
        }
    }
    .link-content {
        margin-bottom: -0.125rem;
    }
    @media (--sm-breakpoint-down) {
        .link-content {
            margin-bottom: 0;
        }
        border: 0;
        background-color: var(--link-color);
    }
    .text,
    .icon {
        @media (--sm-breakpoint-down) {
            color: var(--light-text);
        }
    }
}

.icon {
    color: var(--header-icon-color);
    border-radius: 3px;
    @media (--md-breakpoint-down) {
        color: var(--icon-color);
    }
    @media (--sm-breakpoint-down) {
        color: var(--body-color);
    }
}

.icon-included {
    margin-left: 0.25rem;
    display: inline-flex;
    @media (--md-breakpoint-down) {
        display: none;
    }
    @media (--sm-breakpoint-down) {
        display: inline-flex;
    }
}

.text {
    color: var(--body-color);
}
